<!DOCTYPE html>
<html>
<head>
    <meta charset = "UTF-8">
    <title>流程列表</title>
    <link rel = "stylesheet" href = '/plug-in/pear/css/pear.css' media = "all">
    <link rel = "stylesheet" href = '/css/base.css'>
    <style>
        html{
            height: 100%;
        }
        body{
            display: flex;
            flex-direction: column;
            height: inherit;
        }
        .top-option{

        }
        .page-content{
            flex-grow: 1;
            display: none;
        }
        .business-box{
            display: flex;
        }
        .business-box .business-box-item{
            padding: 20px;
            box-sizing: border-box;
        }
        .business-box .business-box-item a{
            width: 70px;
            height: 70px;
            display: flex;
            flex-direction: column;
        }
        .business-box .business-box-item a:hover{
            opacity: .8;
        }
        .business-box .business-box-item a > div{
            text-align: center;
        }
        .business-box .business-box-item a i{
            font-size: 45px;
            text-align: center;
        }
        .business-box .business-box-item .top{
            width: 50px;
            height: 50px;
            margin: 0 auto;
            background-color: #2196f3;
            padding: 5px;
            color: #efefef;
            border-radius: 15px;
        }
        .business-box .business-box-item .text{
            flex-grow: 1;
        }
    </style>
</head>
<body>
<div class="top-option">
    <form class="layui-form" action="">
        <div class="layui-form-item">
            <input type="checkbox" checked lay-filter="type" name="type" value="0" title="我的业务">
            <input type="checkbox" lay-filter="type" name="type" value="1" title="流程管理">
        </div>
    </form>
</div>
<div class = "page-content">
    <table class = "layui-hide" id = "table" lay-filter = "table"></table>
</div>
<div class="business-box"></div>


<div class="input-bpmn" style="display: none;padding: 30px">
    <div class="layui-form-item" style="margin-bottom: 0">
        <label style="width: 70px" class="layui-form-label towexin-form-label layui-required">业务名称：</label>
        <div class="layui-input-block" style="margin-left: 90px;display: flex">
            <input id="business-name" type="text" autocomplete="off" class="layui-input">
            <button class = "layui-btn layui-bg-black" id="upload-bpmn" style="margin-left: 20px">选择bpmn文件</button>
        </div>
    </div>
</div>

<div class="test-form" style="display: none; padding: 20px;box-sizing: border-box">
    <form class="layui-form" action="" lay-filter="form-obj" style="margin: 10px;">
        <div class="layui-form-item">
            <label style="width: 60px" class="layui-form-label towexin-form-label layui-required">请假事由</label>
            <div class="layui-input-block" style="margin-left: 90px">
                <input type="text" name="reason" lay-verify="required" autocomplete="off" class="layui-input">
                <input type="hidden" name="id" lay-verify="required" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label style="width: 60px" class="layui-form-label towexin-form-label layui-required">开始时间</label>
            <div class="layui-input-block" style="margin-left: 90px">
                <input type="text" name="start_time" lay-verify="required" autocomplete="off" class="layui-input date">
            </div>
        </div>
        <div class="layui-form-item">
            <label style="width: 60px" class="layui-form-label towexin-form-label layui-required">结束时间</label>
            <div class="layui-input-block" style="margin-left: 90px">
                <input type="text" name="end_time" lay-verify="required" autocomplete="off" class="layui-input date">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block" style="text-align: right;">
                <button type="submit" id="submit-type" class="pear-btn pear-btn-primary" lay-submit=""
                        lay-filter="add">立即提交
                </button>
            </div>
        </div>
    </form>
</div>

<div class="code-box" style="display: none;">
    <pre class="layui-code"></pre>
</div>

<script type="text/html" id="businessOption">
    {{#  layui.each(d, function(i, data){ }}
    <div class="business-box-item">
        <a href="javascript:" start key="{{data.id}}">
            <div class="top"><i class="layui-icon layui-icon-component"></i></div>
            <div class="text">{{data.businessName}}</div>
        </a>
    </div>
    {{#  }) }}
</script>

<script type = "text/html" id = "toolbarTop">
    <div class = "layui-btn-container">
        <button class = "layui-btn layui-btn-sm layui-bg-black" lay-event = "refresh">
            <span class = "fa fa-refresh" title = "刷新表格" aria-hidden = "true"></span>
        </button>
        <button class = "layui-btn layui-btn-sm layui-bg-blue" lay-event = "add">
            <span class = "fa fa-plus-circle" aria-hidden = "true"></span> 新建流程
        </button>
        <button class = "layui-btn layui-btn-sm layui-bg-cyan" lay-event = "input">
            <span class = "fa fa-plus-circle" aria-hidden = "true"></span> 导入流程
        </button>
        <button class = "layui-btn layui-btn-sm layui-bg-red layui-hide" id = "isDel" lay-event = "del">
            <span class = "fa fa-trash-o" aria-hidden = "true"></span> 删除
        </button>
    </div>
</script>
<script type = "text/html" id = "barRight">
    <a class = "layui-btn layui-btn-xs layui-btn-warm" lay-event = "edit">编辑</a>
    <a class = "layui-btn layui-btn-xs layui-btn-danger" lay-event = "del">删除</a>
    <a class = "layui-btn layui-btn-xs" lay-event = "list">表单</a>
</script>
<script src = "/plug-in/jquery/jquery-3.5.1.min.js" charset = "utf-8"></script>
<script src = '/plug-in/layui/layui.js' charset = "utf-8"></script>
<script type = "text/javascript">
    let form = layui.form, layer = layui.layer, table = layui.table, upload = layui.upload;

    layui.laydate.render({
        elem: '.date',
        type: 'datetime'
    })

    $(document).on("click", "a[start]", function () {
        layer.open({
            type: 2,
            content: "/page/business/form/"+$(this).attr("key")+"/submit",
            title: false,
            area: ["80%", "80%"],
            scrollbar: false
        })
    })

    form.on('submit(add)', function (data) {
        layer.load()
        $.ajax({
            url: "/activities/start/"+data.field.id,
            type: "POST",
            data: {formJson: JSON.stringify(data.field)},
            success: function (res) {
                if (res.code === 200) {
                    layer.closeAll()
                    layer.msg("成功")
                }else {
                    layer.closeAll('loading')
                    layer.msg("失败")
                }
            },
            error: function () {
                layer.closeAll('loading')
                layer.msg("请求失败")
            }
        })
        return false;
    });

    let excleUp = upload.render({
        elem: '#upload-bpmn',
        auto: false,
        accept: "file",
        exts: 'bpmn',
        choose: function(obj) {
            obj.preview(function(index, file, result) {
                if ($("#business-name").val() !== ""){
                    var form=new FormData();
                    form.append("file", file)
                    form.append("name", $("#business-name").val())
                    $.ajax({
                        type : "post",
                        url: "/activities/process/input",
                        data:form,
                        contentType: false,
                        processData: false,
                        success(res){
                            if(res.code == 200){
                                layer.msg("部署成功", ()=>{
                                    tab.reload()
                                    layer.closeAll()
                                })
                            }else {
                                layer.msg("部署失败", ()=>{
                                    layer.closeAll()
                                })
                            }
                        },
                        error(err){
                            layer.msg("请求失败", ()=>{
                                layer.closeAll()
                            })
                        }
                    })
                }else {
                    layer.msg("请先输入业务名称！")
                }
            })
        }
    });


    let tab = table.render({
        elem: '#table',
        url: '/activities/process/list',
        //page: {
        //    layout: ['prev', 'page', 'next', 'skip', 'count', 'limit'],
        //    groups: 3, //只显示 1 个连续页码
        //},
        height: "full-100",
        limit: 30,
        skin: "line",
        limits: [30, 45, 60],
        toolbar: '#toolbarTop', //开启头部工具栏，并为其绑定左侧模板
        //defaultToolbar: null,
        parseData: function (res) { //res 即为原始返回的数据
            return {
                "code": res.code, //解析接口状态
                "msg": res.msg, //解析提示文本
                "total": res.data.length, //解析数据长度
                "data": res.data //解析数据列表
            };
        },
        response: {
            statusCode: 200, //规定成功的状态码，默认：0
            countName: 'total' //规定数据总数的字段名称，默认：count
        },
        cols: [[
            {field: "businessName", minWidth: 120, title: '业务名称'},
            {field: "key", minWidth: 120, title: '流程key'},
            {field: "name", minWidth: 120, title: '流程名称'},
            {field: "version", width: 120, title: '流程版本'},
            {width: 200, title: '流程图', templet: function (d) {
                return '<a key="open-svg" href="javascript:;" href-data="/activities/process/'+d.id+'/image">'+d.key+'.svg'+'</a>'
            }},
            {width: 200, title: '流程xml', templet: function (d) {
                return '<a key="open-xml" href="javascript:;" href-data="/activities/process/'+d.id+'/xml">'+d.key+'.xml'+'</a>'
            }},
            {field: "time", title: '部署时间'},
            {title: '操作', toolbar: '#barRight', width: 180, unresize: true, fixed: 'right'}]
        ],
        done(d){
            layui.laytpl(businessOption.innerHTML).render(d.data, (html)=>{
                $(".business-box").html(html)
            })
        }
    });

    table.on('toolbar(table)', function(obj) {
        var checkStatus = table.checkStatus(obj.config.id);
        switch (obj.event) {
            case 'refresh':
                tab.reload()
                break;
            case 'add':
                //top.layui.tab.addTabOnlyByElem("content",{
                //    id:"new-model",
                //    title:"新建流程设计",
                //    url:"/page/business/model",
                //    close: true
                //})
                top.layer.open({
                    type: 2,
                    content: "/page/business/model/",
                    title: false,
                    area: ["98%", "96%"],
                    scrollbar: false
                })
                break;
            case 'input':
                layer.open({
                    type: 1,
                    content: $(".input-bpmn"),
                    title: false,
                    //area: ["300px", "200px"],
                    scrollbar: false
                })
                break;
        }
    });

    //监听行工具事件
    table.on('tool(table)', function(obj) {
        var data = obj.data;
        if(obj.event === 'edit'){
            //top.layui.tab.addTabOnlyByElem("content",{
            //    id:data.id,
            //    title:"编辑流程-"+data.businessName,
            //    url:"/page/business/model/" + data.id,
            //    close: true
            //})
            top.layer.open({
                type: 2,
                content: "/page/business/model/" + data.id,
                title: false,
                area: ["98%", "96%"],
                scrollbar: false
            })
            //window.open("/page/business/model/" + data.id)
        } else if(obj.event === "del"){
            layer.confirm('确定删除 <span style="color: #ff0000; font-weight: 800">' + data.name + '</span> 么？', {
                icon: 3,
                title: '提示'
            }, function (index) {
                layer.close(index);
                layer.load()
                $.ajax({
                    url: '/activities/delete/'+data.deploymentId,
                    success: function (result) {
                        layer.closeAll('loading')
                        if (result.code == 200) {
                            tab.reload();
                            layer.msg("删除成功")
                        } else {
                            layer.msg("删除失败")
                        }
                    },
                    error: function () {
                        layer.closeAll('loading')
                        layer.msg("请求失败")
                    }
                });
            });
        } else if(obj.event === "list"){
            $.get("/activities/process/form/html/"+data.id , (res)=>{
                $(".layui-code").text(res.data)
                //使用layui的code代码展示
                layui.code({
                    about:true,
                    title:'表单html文本', //设置标题
                    skin:'notepad' //设置显示风格
                });
                layer.open({
                    type: 1,
                    content: $(".code-box"),
                    title: false,
                    area: ["80%", "95%"],
                    scrollbar: false
                })
            })
        }
    });

    form.on('checkbox(type)', function(data){
        //全部取消选中
        $("input[name='type']").prop("checked", false);
        //全部取消选中
        $(this).prop("checked", true);
        //重新渲染checkbox。
        form.render('checkbox');
        if ($(this).val()==0){
            $(".business-box").show()
            $(".page-content").hide()
        }else if($(this).val()==1){
            $(".page-content").show()
            $(".business-box").hide()
        }
    });

    $(document).on("click", "a[key=open-svg]", function () {
        layer.open({
            type: 2,
            content: $(this).attr("href-data"),
            title: false,
            area: ["95%", "95%"],
            scrollbar: false
        })
    })
    $(document).on("click", "a[key=open-xml]", function () {
        $.get($(this).attr("href-data"), (res)=>{
            $(".layui-code").text(res)
            //使用layui的code代码展示
            layui.code({
                about:false, //不显示右上角 layui.code
                title:'流程xml', //设置标题
                skin:'notepad' //设置显示风格
            });
            layer.open({
                type: 1,
                content: $(".code-box"),
                title: false,
                area: ["95%", "95%"],
                scrollbar: false
            })
        })
    })

</script>
</body>
</html>